<template>
  <div style="width: 100%; height: 100%" class="test">
  <dv-page target="parent" fit>
    <dv-box style="border:1px solid red" layout :gap="20" left="20px" top="20px" height="calc(100% - 40px)" width="30%">
      <!-- <dv-chart-bar fit :data="data" debug :settings="{
          gradient: true, 
          direction: 'y', 
          stack: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        }"></dv-chart-bar> -->
      <dv-box class="inner" width="100%" :weight="1">AAA</dv-box>  
      <dv-box class="inner" width="100%" :weight="2">BB
        <button @click="test">test</button>
      </dv-box>
      <dv-box class="inner" width="100%" :weight="1">CCC</dv-box>
      <dv-box class="inner" width="100%" :weight="1" v-if="z">ee</dv-box>
    </dv-box>
  </dv-page>

  <!-- <button @click="test">test / {{zIndex}}</button> -->
  </div> 
    
</template>
<script setup lang="ts" >
import { ref } from 'vue';
import { DvPage, DvBox, DvChartBar } from '../../lib/dv-hub';

const z = ref(true)
const test = () => {
  z.value = !z.value;
}

const data = ref({
  columns: ['星期', '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
  rows: [
      ['周一', 320, 302, 301, 334, 390, 330, 320],
      ['周二', 120, 132, 101, 134, 90, 230, 210],
      ['周三', 220, 182, 191, 234, 290, 330, 310],
      ['周四', 150, 212, 201, 154, 190, 330, 410],
      ['周五', 320, 132, 401, 334, 290, 330, 320]
  ]
})
</script>
<style lang="scss" scoped>
@import '../../lib/style.css';
.test{
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   .dv-box.inner {
   background: rgb(68, 107, 226, 0.4);
  //  padding:20px;
   font-size:20px;
   text-align: center;
  }
 }
</style>
